import {StyleSheet, Dimensions} from 'react-native'
export const screenWidth = Dimensions.get('window').width
export const screenHeight = Dimensions.get('window').height

export const GREY = '#707070'
export const BLUE = '#3c8df9'
export const borderBottomLine = '#eaeefe'
export const LIGHT_GREY = '#F0F0F0'
export const CYAN = '#eff6fa'
export const RED = 'red'
export const SMALL = 14
export const MID = 18
export const BIG = 20
export const LARGE = 24

const styles = StyleSheet.create({

    main_body:{
        flex: 1,
        backgroundColor:CYAN
    },
    normal_text: {
        fontSize: 16
    },
    
    centering: {
        flex:1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor:'yellow',
        padding: 8,
    },

    gray: {
        backgroundColor: '#cccccc',
    },

    horizontal: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        padding: 8,
    },

    header_container: {
        flex: 0.33, 
        justifyContent: 'center', 
        alignItems: 'center'
    },

    header_left_time_picker: {
        padding: 10
    },

    header_font: {
        paddingRight:5,
        fontSize: 16,
        color: 'white'
    },

    list_item_text: {
        marginTop: 5, 
        //fontWeight: 'bold',
        paddingLeft: 2, 
        fontSize: 14
    },

    text_label_grey: {
        marginTop: 5,
        fontSize: 14,
        color: '#707070'
    },

    view_module_container: {
        flex: 1, 
        padding: 10,
        //paddingLeft:15,
        backgroundColor: 'white'
    },

    text_content_container: {
        borderBottomWidth: 0.3,
        borderBottomColor: '#eaeefe',
        height: 45,
        padding:15
    },

    status_label_text: {
        fontSize: 14
    },

    list_item_gray_text: {
        fontSize: 14,
        color: '#707070'
    },

    list_item_container: {
        padding: 15,
        backgroundColor: 'white',
        marginLeft: 5,
        marginRight: 5,
        flexDirection: 'row',
        borderRadius: 5, 
    },

    attachmet_add_button: {
        height: 60,
        width: 60,
        borderStyle: 'dashed', 
        borderWidth: 0.6, 
        justifyContent: 'center', 
        alignItems: 'center', 
        margin: 5,
        marginRight: 20
    },

    section_header_container: {
        backgroundColor: CYAN,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 5    
    },

    section_header_text: {
        color: '#707070'
    },

    icon_small_container: {
        backgroundColor: BLUE,
        width: (screenWidth / 8),
        height: (screenWidth / 8),
        borderRadius: 50
    },

    icon_inner_container: {
        justifyContent: 'center', 
        alignItems: 'center', 
        flex: 1
    },

    selector_label: {
        flexDirection: 'row',
        padding: 15,
        borderBottomWidth: 0.3,
        borderBottomColor: BLUE,
        backgroundColor: 'white',
        margin: 1
    },

    select_inner_label: {
        flex: 1,
        margin: 5,
        borderBottomWidth: 0.3,
        borderBottomColor: 'grey',
        padding: 5
    },

    classroom_select: {
        justifyContent: 'center', 
        alignItems: 'center', 
        padding: 5,
        margin: 5,
        borderRadius: 5, 
        width: screenWidth / 4 - 5
    },

    classroom_container: {
        flexDirection: 'row', 
        flexWrap: 'wrap', 
        width: screenWidth, 
        flex: 1, 
        padding: 10,
        borderBottomWidth: 0.2,
        borderBottomColor: 'grey'
    },

    scroll_view_container: {
        padding: 5, 
        backgroundColor: CYAN
    },

    rank_label: {
        flexDirection: 'row',
        padding: 5,
        marginTop: 5,
        backgroundColor: 'white',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

    personal_inner_container: {
        alignItems: 'center', 
        justifyContent: 'center', 
        marginTop: 20, 
        padding: 20, 
        backgroundColor: 'white'
    },

    personal_img_container: {
        height: screenHeight / 3,
        backgroundColor: BLUE,
        flexDirection: 'column-reverse',
    },

    personal_img_inner_container: {
        height: screenHeight / 6,
        backgroundColor: 'white',
        justifyContent: 'flex-end',
        position: 'relative',
        top: -20
    },

    personal_avatar: {
        flexDirection: 'row',
        //alignItems: 'flex-start',
        //justifyContent: 'flex-start',
        position: 'absolute',
        bottom:-40,
        left:20,
        zIndex: 1
        //marginTop:130
    },

    personal_container: {
        //alignItems: 'center',
        flex: 1,
        backgroundColor: 'white',
        position: 'relative'
    },

    personal_label_container: {
        flexDirection: 'row', 
        padding: 15,
        borderBottomWidth: 0.2,
        borderBottomColor: 'grey',
        borderRadius: 25
    },

    image_wrap: {
        width: (screenWidth / 6 - 5),
        height: (screenWidth / 6 - 5),
        marginLeft: 12,
        marginRight: 12,
        borderRadius: Math.min(screenWidth / 12 - 2.5, 36),
        maxWidth: 72,
        maxHeight: 72,
        marginTop: 5
        
    },

    answer_button: {
        borderRadius: 5,
        height: 50,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 5    
    },

    selector_container: {
        padding: 20,
        margin: 0.5,
        backgroundColor: 'white'
    },

    as_button: {
        alignItems: 'center', 
        justifyContent: 'center',
        backgroundColor: '#ff951a', 
        paddingLeft: 15, 
        paddingRight: 15,
        paddingTop: 5,
        paddingBottom: 5,
        borderRadius: 5,
    },

    as_radio_button: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderWidth:1,
        borderColor:BLUE,
        borderRadius: 150,
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 5,
        paddingBottom: 5,
        //elevation: 10
    },

    as_large_button: {
        alignItems: 'center', 
        justifyContent: 'center',
        backgroundColor: '#ff951a', 
        paddingLeft: 30, 
        paddingRight: 30,
        paddingTop: 10,
        paddingBottom: 10,
        borderRadius: 5,
        marginLeft: 5,
        marginRight: 5,
    },

    background_orange: {
        backgroundColor: '#ff951a'
    },

    background_blue: {
        backgroundColor: BLUE
    },

    background_light_grey: {
        backgroundColor: '#f1f5f6'
    },

    background_light_grey_plus: {
        backgroundColor: LIGHT_GREY
    },

    text_white: {
        color: 'white'
    },

    text_blue: {
        color: BLUE
    },

    text_orange: {
        color: '#ff951a'
    },

    text_gray: {
        color: '#707070'
    },

    text_black: {
        color: 'black'
    },

    text_light_gray: {
        color: '#f1f5f6'
    },

    tab_box: {
        backgroundColor:'#fff',
        marginLeft:15,
        marginRight:15,
        marginTop:15
    },

    tag_container: {
        borderWidth: 0.5, 
        borderRadius: 5, 
        padding: 3
    },


    //自学symbol统计

    main_warp:{
        backgroundColor: '#f1f1f1',
        flex:1,
    },

    symbol_item:{
        backgroundColor: '#fff',
        marginTop:15
    },

    symbol_item_hd:{

        padding:15,
        borderBottomWidth: 1,
        borderBottomColor: '#eaeefe'
    },
    symbol_item_list:{
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: screenWidth
    },

    sy_list_item:{
        width:screenWidth/3,
        paddingLeft:30,
        paddingTop:15,
        paddingBottom:15
    },
    sy_box:{
        width:75,
        height:75,
        borderWidth:1,
        borderColor:'#e4e4e4',
        justifyContent: 'center',alignItems: 'center',
        zIndex:2
    },
    sy_detail_button: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderWidth:1,
        borderColor:'#e1e1e1',
        borderRadius: 150,
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 5,
        paddingBottom: 5,
        marginTop:15,
        width:75
    },
    sy_badge:{
        backgroundColor: '#ff9e57',
        borderRadius: 25,
        height: 18,
        width: 40,
        alignItems: 'center',
        justifyContent: 'center',
        position: "relative",
        left: 50,
        top:9,
        shadowColor: '#ff9e57',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        zIndex:3
    },

    //统计详情
    sum_err_times:{
      backgroundColor:'#f1f9ff',
      justifyContent: 'center',
      padding:15
    },


    err_times_list:{

    },
    

    err_times_item:{
        backgroundColor:'#fff',
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#eaeefe',
        paddingLeft:15,
        paddingRight:15,
        paddingBottom:10,
        paddingTop:10
    },

    score_select_btn: {
        backgroundColor: RED, 
        flex: 1, 
        margin: 2, 
        height: 30, 
        width: 30, 
        justifyContent: 'center', 
        alignItems: 'center', 
        borderRadius: 5
    },

    blue_radius_btn:{
        //flex:1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: BLUE,
        borderRadius: 150,
        //paddingLeft: 15,
        //paddingRight: 15,
        paddingTop: 5,
        paddingBottom: 5,
        //elevation: 10,
        marginTop:8,
        width:60,
        shadowColor: BLUE,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2

    },

    light_radius_btn:{
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#f1f5f6',
        borderRadius: 150,
        paddingTop: 5,
        paddingBottom: 5,
        marginTop:8,
        width:60

    },


    attachment_view:{
        height: 60,
        width: 60
    },

    hw_status_badge:{
        backgroundColor: '#fd2f00',
        borderRadius: 10,
        height: 18,
        width: 18,
        alignItems: 'center',
        justifyContent: 'center',
        position: "absolute",
        left: 45,
        bottom:20,
    },
    
    hw_status_badge_blue:{
        backgroundColor: BLUE,
        borderRadius: 10,
        height: 18,
        width: 18,
        alignItems: 'center',
        justifyContent: 'center',
        position: "absolute",
        left: 45,
        bottom:20,
    },

    begin_challenge: {
        backgroundColor: BLUE,
        borderRadius: 6,
        paddingLeft: 20,
        paddingRight: 20,
        padding: 10,
        marginBottom: 20
    },

    sentence_label_container: {
        borderBottomWidth: 0.2,
        flex: 1,
        borderColor: 'gray'
    },

    sentence_label_text: {
        fontSize: 20,
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },   

    icon_container: {
        backgroundColor: BLUE, 
        width: (screenWidth / 6 ),
        height: (screenWidth / 6 ),
        maxWidth: 80,
        maxHeight: 80,
        borderRadius: Math.min(screenWidth / 12, 40),
        //flex: 1
    },

    large_icon: {
        backgroundColor: BLUE, 
        width: (screenWidth / 5),
        height: (screenWidth / 5),
        maxHeight: 100,
        maxWidth: 100,
        borderRadius: Math.min(screenWidth / 10, 50)
    },

    score_template: {
        backgroundColor: 'orange', 
        alignItems: 'center', 
        justifyContent: 'center', 
        borderRadius: 5, 
        padding: 4, 
        margin: 10,
        width:40
    },

    youdaoFont: {
        fontWeight: 'bold', 
        fontSize: 25, 
        color: 'black'
    },

    reportButton: {
        margin: 10, 
        backgroundColor: 'green', 
        width: 150,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 50,
        padding: 15
    }
    
})

export default styles